<template>
  <div>
    <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        title="新增水电"
    />
    <van-form @submit="onSubmit">
      <van-field
          readonly
          clickable
          name="日期"
          :value="form.costDate"
          label="日期"
          placeholder="点击选择日期"
          @click="showCalendar = true"
      />
      <van-calendar v-model="showCalendar" @confirm="onConfirm" :show-confirm="false" type="single" :min-date="minDate"/>
      <van-field
          v-model="form.water"
          name="水费"
          label="水费"
          placeholder="水费"
          type="number"
          :rules="[{ required: true, message: '请填写水费' }]"
      />
      <van-field
          v-model="form.electric"
          name="电费"
          label="电费"
          placeholder="电费"
          type="number"
          :rules="[{ required: true, message: '请填写电费' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {costAdd} from "@/api/operator";
import {getLocalOpenId} from "@/utils/wxUtil";
import {formatDateNoH} from "@/utils";
import dayjs from "dayjs"

export default {
  data() {
    return {
      showCalendar: false,
      minDate: new Date(2020, 0, 1),
      form: {
        machineId: this.$route.query.id,
        operatorId: getLocalOpenId(),
        electric: '',
        water: '',
        costDate: ''
      }
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onSubmit: function () {
      costAdd(this.form).then(res => {
        this.$toast.success("新增成功！")
        this.onClickLeft()
      })
    },
    onConfirm(date){
      date = formatDateNoH(date)
      this.form.costDate = date
      this.showCalendar = false
    }
  },
  created() {
  },
  mounted() {
    this.form.costDate = dayjs().format('YYYY-MM-DD')
  }
}
</script>

<style scoped>
</style>
